<template>
  <div class="widgets" :style="{
    left: val.left + 'px',
    top: val.top + 'px',
    width: val.width + 'px',
    height: val.height + 'px',
    textAlign: val.style.Alignment,
    fontSize: val.style.FontSize + 'px',
    color: val.style.FontColor,
  }" style="position: absolute; overflow: hidden">
    <table border="1" width="100%" cellspacing="0" cellpadding="2"
      :style="`border-collapse: collapse; font-size:${val.style.FontSize}px;}`" bordercolor="#000000">
      <colgroup>
        <col v-for="item in columns" :style="{ width: `${item.width}%` }">
      </colgroup>
      <tr :style="{
        background: val.style.titleColor,
      }">
        <th v-for="item in columns" :key="item.name" :width="item.name === '_seq' ? 40 : ''"
          :style="{ height: `${val.style.linHeight ? `${val.style.linHeight}px` : ''}` }">
          {{ item.title }}
        </th>
      </tr>
      <tr>
        <td v-for="item in columns" :key="item.name"
          :style="{ height: `${val.style.linHeight ? `${val.style.linHeight}px` : ''}` }">
          {{ item.value ? item.value : "" }}
        </td>
      </tr>
    </table>
  </div>
</template>

<script>
const WIDGET_NAME = "braid-table";

export default {
  name: WIDGET_NAME,
  setting: {
    type: WIDGET_NAME,
    isEdit: false, // 是否可编辑
    dragable: true, // 是否可拖拽
    resizable: true, // 尺寸是否可变
    width: 240,
    height: 60,
    left: 50,
    top: 10,
    title: "表格",
    value: [],
    defaultValue: [],
    tabelHtml: "",
    columnsAttr: [], // 表格列选项
    columns: [], // 已选表格列表
    selectCol: [], // 已选表格列name数组（用于多选框双向绑定）
    name: "",
    style: {
      zIndex: 0,
      Alignment: "left", // 对齐方式 1--左靠齐 2--居中 3--右靠齐
      FontSize: 12,
      FontColor: "#000000",
      BorderColor: "#000000",
      AutoHeight: true, // 高度自动（模板在该元素位置以下的元素都关联打印）
      BottomMargin: 0, // 距离下边距
    },
  },
  props: [
    "val", // 文本对象
  ],
  computed: {
    // 去掉type='row'的数据
    columns() {
      let col = this.val.columns || [];
      return col;
    },
    defaultValue() {
      let col = this.val.defaultValue || [];
      return col;
    },
  },
  methods: {},
};
</script>
